import * as echarts from 'echarts'
import React from 'react'


/**
 * 名称：活动流量图
 * 描述：活动流量图
 * 调用：营销效果中心
 * 输入：store 营销数据
 * 时间：20220404
 */
class FlowMonitorEchart extends React.Component {
    draw(){
        let  chartDom = document.getElementById('flow')
        let  myChart = echarts.init(chartDom)
        let  option
        

        const {store} = this.props
        let  {activityData}= store
        let  legendData = []
        let  seriesData = []
        if(!activityData[0]){
            return;
        }
        console.log(activityData)
        activityData.map((item)=>{
            legendData = [...legendData,item.name]
            let  seriesItem = {
                name:item.name,
                type:'line',
                data: item.joinNum,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            }
            seriesData = [...seriesData,seriesItem]
            
            
        })  


        option = {
            backgroundColor: '#2c343c',
            title: { textStyle: {
                color: '#ccc'
                },
                text: '流量监控' },
                tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:legendData,
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {
                        show: true,
                        type: 'jpg'
                    }
                }
            },
            xAxis: {
            type: 'category',
            data:  activityData[0].time
            },
            yAxis: {
            type: 'value'
            },
            series: seriesData
        };
        
        option && myChart.setOption(option);
    }
    componentDidUpdate() {
            this.draw()
    }
    componentDidMount(){
            this.draw()
    }
render() {
    return (
        <div id="flow" style={{ width: '100%', height: "100%" }}>111</div>
    );
}
}


export default FlowMonitorEchart